<template>
	<view class="detail">
		<!-- #ifdef H5 -->
		<view class="video-js" ref="video">
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="video-js">
			<video :src="detail.videopath"></video>
		</view>
		<!-- #endif -->
		<view class="line"></view>
		<view class="title">
			<text>标题：{{detail.title}}</text>
			<text>浏览：{{detail.pageviews}}</text>
			<text>时长：{{detail.playtimes}}</text>
			<text>作者：{{detail.authername}}</text>
			<text>时间：{{detail.created_at}}</text>
		</view>
		<view class="line"></view>
		<view class="labs">
			<text>{{detail.labels}}</text>
		</view>
		<view class="star">
			<image src="../../static/icon/star-w.png"></image>
			<text>加入收藏</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				detail: {}
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中'
			});
			this.getDetail(options)
		},
		methods: {
			async getDetail(options) {
				const response = await this.$myRequest({
					url: '/api/Video/GetDetailAsync?id=' + options.id + '&source=' + options.source
				})
				this.detail = response.data.Data
				this.id = options.id
				uni.hideLoading()
				// this.detail.videopath = 'https://www.hyxrzs.com/20210424/fMdPeasY/index.m3u8'
				this.videoInit()
			},
			videoInit() {
				// #ifdef H5
				var video = document.createElement('video')
				video.id = 'video'
				video.style = 'width: 100%'
				video.controls = true
				var source = document.createElement('source')
				source.src = this.detail.videopath
				video.appendChild(source)
				this.$refs.video.$el.appendChild(video)
				videojs('video')
				// #endif  
			}
		}
	}
</script>

<style lang="scss">
	.detail {
		font-size: 26rpx;

		.video-js {
			width: 750rpx;

			video {
				width: 100%;
				height: 424rpx;
			}
		}

		.line {
			background: #ccc;
			height: 4rpx;
			width: 750rpx;
			margin: 10rpx 0;
		}

		.title {
			padding: 0 10rpx;

			text {
				display: flex;
			}
		}

		.labs {
			text-align: center;
			font-size: 30rpx;
			font-weight: 800;

			text {
				background: $vpp-color;
				display: block;
				padding: 10rpx;
				color: #FFFFFF;
				width: 100%;
			}

		}

		.star {
			width: 750rpx;
			padding: 10px 0;
			background: $vpp-color;
			bottom: 0;
			position: fixed;
			text-align: center;
			font-size: 12px;

			image {
				width: 18px;
				height: 18px;
			}

			text {
				color: #FFFFFF;
				font-weight: 800;
				margin-left: 10rpx;
			}
		}
	}
</style>
